<template>
  <div class="layout">
    <div class="good_detail">
      <h2>商品详情</h2>
      <hr style="color: #ccc" />
      <div class="attrs">
        <div
          class="detail_info"
          v-for="item in goods.details?.properties"
          :key="item.value"
        >
          <p class="dt">{{ item.name }}</p>
          <p class="dd">{{ truncateText(item.value, 35) }}</p>
        </div>
      </div>
      <div class="image" v-for="item in goods.details?.pictures" :key="item">
        <img v-img-lazy="item" />
      </div>
    </div>
    <div class="hot_goods">
      <DetailHot class="hot" :hot-type="1" />
      <DetailHot class="hot" :hot-type="2" />
    </div>
  </div>
</template>

<script setup>
import { truncateText } from "@/utils/truncateText";
import { useGoodList } from "../composables/useGoodList";
import DetailHot from "./DetailHot.vue";

const { goods } = useGoodList();
</script>

<style lang="scss" scoped>
.layout {
  display: flex;
  align-items: flex-start;

  .good_detail {
    width: 1330px;
    margin: 10px 0 0 150px;
    padding: 0 50px;
    background: white;

    h2 {
      margin: 10px 0;
    }

    .attrs {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      padding: 10px 0;
      .detail_info {
        display: flex;
        align-items: center;
        .dt {
          width: 80px;
          color: #ccc;
        }
      }
    }

    .image {
      text-align: center;
      img {
        width: 100%;
        height: auto;
      }
    }
  }

  .hot_goods {
    margin: 10px;
    width: 265px;
  }
}
</style>